<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <vue-context-menu :contextMenuData="contextMenuData"
                        @tableConfig="tableConfig"
                        @deletedata="deletedata"></vue-context-menu>

      <!-- 表格配置 -->
      <el-dialog title="表格配置"
                 :visible.sync="tableConfigShow"
                 width="60%">
        <j-table-column-config :columns.sync="crud.header"  @tabSave="tabSave" @pit="pit" />
      </el-dialog>
      <crudOperation :permission="permission">
        <!--        <el-button-->
        <!--            slot="right"-->
        <!--            class="filter-item"-->
        <!--            size="mini"-->
        <!--            type="danger"-->
        <!--            @click="crud.enableOrDisable('DISABLE')"-->
        <!--            :disabled="crud.selections.length < 1"-->
        <!--            v-permission="permission.pass"-->
        <!--        >-->
        <!--          审核-->
        <!--        </el-button>-->
        <!--        <el-button-->
        <!--            slot="right"-->
        <!--            class="filter-item"-->
        <!--            size="mini"-->
        <!--            type="success"-->
        <!--            :disabled="crud.selections.length < 1"-->
        <!--            @click="crud.enableOrDisable('ENABLE')"-->
        <!--            v-permission="permission.reject"-->
        <!--        >-->
        <!--          反审-->
        <!--        </el-button>-->
      </crudOperation>
<!--      &lt;!&ndash;表单组件&ndash;&gt;-->
<!--      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"-->
<!--                 :title="crud.status.title" width="500px">-->
<!--        <div>-->
<!--          <el-button-->
<!--              v-if="crud.optShow.pass"-->
<!--              slot="right"-->
<!--              v-permission="crud.optShow.pass"-->
<!--              class="filter-item"-->
<!--              size="mini"-->
<!--              type="success"-->
<!--              :loading="crud.optShow.disable"-->
<!--              :disabled="crud.selections.length < 1"-->
<!--              @click="crud.enableOrDisable('PASS')"-->
<!--          >-->
<!--            审核-->
<!--          </el-button>-->

<!--          <el-button-->
<!--              v-if="crud.optShow.del"-->
<!--              slot="reference"-->
<!--              v-permission="permission.del"-->
<!--              :disabled="crud.selections.length === 0"-->
<!--              :loading="crud.delAllLoading"-->
<!--              class="filter-item"-->
<!--              size="mini"-->
<!--              type="danger"-->
<!--              @click="toDelete(crud.selections)"-->
<!--          >-->
<!--            删除-->
<!--          </el-button>-->
<!--        </div>-->
<!--        <el-form ref="form" :model="form" :rules="rules" inline size="small" label-width="80px">-->
<!--          <el-form-item label="单据编号">-->
<!--            <el-input v-model="form.id" style="width: 370px;"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="来源类型">-->
<!--            <el-select v-model="form.sourceType" disabled class="edit-input" placeholder="请选择来源类型" style="width: 370px;">-->
<!--              <el-option-->
<!--                  v-for="(item,index) in dict.t_mobile_order_source_type"-->
<!--                  :key="index"-->
<!--                  v-if="item.seq>0"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--              />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="客户名称">-->
<!--            <el-input disabled v-model="form.customerName" style="width: 370px;"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="部门名称">-->
<!--            <el-input disabled v-model="form.deptName" style="width: 370px;"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="客户业务员">-->
<!--            <el-input v-model="form.userName" disabled style="width: 370px;"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="备注">-->
<!--            <el-input v-model="form.remark" style="width: 370px;"/>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--          <el-button type="text" @click="crud.cancelCU">取消</el-button>-->
<!--          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>-->
<!--        </div>-->

<!--        <el-divider content-position="left">商品列表</el-divider>-->
<!--        <el-table ref="goodsTable" stripe border-->
<!--                  :data="form.detailList" size="small" style="width: 100%;" >-->
<!--          <el-table-column :render-header="crud.renderHeader" type="selection" width="60"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" type="index" width="60" label="序号"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="code" label="编码"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="goodsName" label="名称"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="helpSign" label="助记符"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="model" label="规格型号"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="barcode" label="条形码"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="firstUnitName" label="一级单位名称"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="firstUnitCount" label="一级单位计量数"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="secondUnitName" label="二级单位名称"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="secondUnitCount" label="二级单位计量数"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="goodsBrandName" label="商品品牌名称"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="goodsTypeName" label="商品分类名称"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="fCustomerName" label="所属商贸公司名称"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="taxRate" label="税率"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="buyTaxPrice" label="采购含税价"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="buyNoTaxPrice" label="采购未税价"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="buyTaxBoxPrice" label="采购含税箱价"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="buyNoTaxBoxPrice" label="采购未税箱价"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="isBatchManage" label="是否批次管理"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="minSaleUnitName" label="最小销售单位名称"/>-->
<!--          <el-table-column :render-header="crud.renderHeader" prop="minReturnUnitName" label="最小退货单位名称"/>-->

<!--          &lt;!&ndash;      <el-table-column :render-header="crud.renderHeader" prop="type" label="销售单类型">&ndash;&gt;-->
<!--          &lt;!&ndash;        <template slot-scope="scope">&ndash;&gt;-->
<!--          &lt;!&ndash;          {{ dict.label.t_sales_order_type[scope.row.type] }}&ndash;&gt;-->
<!--          &lt;!&ndash;        </template>&ndash;&gt;-->
<!--          &lt;!&ndash;      </el-table-column>&ndash;&gt;-->

<!--        </el-table>-->

<!--      </el-dialog>-->
      <!--表格渲染-->
      <el-table ref="table"  border
                height="700"
                show-summary
                @cell-dblclick="row=>crud.toEdit(row)"
                v-loading="crud.loading"
                :data="crud.data"
                size="small"
                style="width: 100%;"
                :summary-method="crud.sumRow"
                @header-dragend="changeColWidth"
                @contextmenu.native="showMenu"
                @row-click="crud.selectRow"
                :row-style="crud.rowClass"
                :row-class-name="crud.tableRowClassName"
                @selection-change="crud.selectionChangeHandler"
                @row-dblclick="crud.toDetailPlus('mobileOrderDetail',$event.id)">
        <el-table-column :render-header="crud.renderHeader" type="selection" width="60"/>
        <el-table-column :render-header="crud.renderHeader" type="index" width="60" label="序号"/>
        <el-table-column
          v-if="item.visible"
          v-for="(item, index) in crud.header"
          :key="`col_${index}`"
          :prop="item.prop"
          :label="columnLabel(item)"
          :width="item.width + 'px'"
          :data-porp='item.prop'
          @contextmenu.native="showMenu"
          @header-dragend="changeColWidth"
        >
          <!-- 自定义渲染模版 -->
          <template slot-scope="scope">
            <!-- 当列key为 sort 时，渲染一个手柄icon -->
            <template v-if="item.prop =='sort'">
              <div class="handle_move">
                <i :class="scope.row['sort']" />
              </div>
            </template>
            <template v-else>
              <span v-if="item.type == 1" style="margin-left: 10px">{{scope.row[`${item.prop}`]}}</span>
              <span v-if="item.type == 2" style="margin-left: 10px">{{ parseTime(scope.row[`${item.prop}`])}}</span>
              <span v-if="item.type == 3" style="margin-left: 10px">{{ getDict(`this.dict.label.${item.dictionary}["${scope.row[item.prop]}"]`) }}</span>
            </template>
          </template>
        </el-table-column>
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('code')" prop="code" label="单据编号"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('type')" prop="type" label="移动端订单类型">-->
<!--          <template slot-scope="scope">-->
<!--            {{ dict.label.t_mobile_order_type[scope.row.type] }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('busDate')" prop="busDate" label="业务日期">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ parseTime(scope.row.busDate) }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerName')" prop="customerName" label="客户名称"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('deptName')" prop="deptName" label="销售部门"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('userName')" prop="userName" label="业务员"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerTypeName')" prop="customerTypeName" label="客户分类"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerAreaName')" prop="customerAreaName" label="销售区域"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('printCount')" prop="printCount" label="打印次数"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('taxAmount')" prop="taxAmount" label="含税金额"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('noTaxAmount')" prop="noTaxAmount" label="未税金额"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('tax')" prop="tax" label="税额"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('boxCount')" prop="boxCount" label="箱数"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('count')" prop="count" label="条数"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('taxAmount')" prop="taxAmount" label="含税金额"/>-->
<!--         <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('oldTaxPrice')" prop="oldTaxPrice" label="原金额"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('discountAmount')" prop="discountAmount" label="折扣金额"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('isPromotion')" prop="isPromotion" label="是否促销">-->
<!--          <template slot-scope="scope">-->
<!--            {{ dict.label.common_yes_or_no[scope.row.isPromotion] }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('remark')" prop="remark" label="备注"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('orderStatus')" prop="orderStatus" label="状态">-->
<!--          <template slot-scope="scope">-->
<!--            {{ dict.label.common_order_status[scope.row.orderStatus] }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('sourceType')" prop="sourceType" label="来源类型">-->
<!--          <template slot-scope="scope">-->
<!--            {{ dict.label.t_mobile_order_source_type[scope.row.sourceType] }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('sourceCode')" prop="sourceCode" label="来源单据号"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('createUserName')" prop="createUserName" label="添加人名称" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('createTime')" prop="createTime" label="添加时间">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ parseTime(scope.row.createTime) }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('updateUserName')" prop="updateUserName" label="修改人名称" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('updateTime')" prop="updateTime" label="修改时间">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ parseTime(scope.row.updateTime) }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('auditUserName')" prop="auditUserName" label="审核人名称" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('auditTime')" prop="auditTime" label="审核时间">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ parseTime(scope.row.auditTime) }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('closeUserName')" prop="closeUserName" label="关闭人名称" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('closeTime')" prop="closeTime" label="关闭时间">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ parseTime(scope.row.closeTime) }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <!--        <el-table-column :render-header="crud.renderHeader" v-permission="['admin','mobileOrder:edit','mobileOrder:del']" label="操作" width="150px" align="center">-->
        <!--          <template slot-scope="scope">-->
        <!--            <udOperation-->
        <!--              :data="scope.row"-->
        <!--              :permission="permission"-->
        <!--            />-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <!--分页组件-->
      <pagination/>
    </div>
  </div>
</template>

<script>
import crudMobileOrder from '@/api/erp/mobileOrder'
import CRUD, {crud, form, header, presenter} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

import {tablemixins} from "@/mixins/tablemixins";
import jTableColumnConfig from "@/components/jTableColumnConfig/jTableColumnConfig";
import { publicListKey } from "@/utils/key";

// crud交由presenter持有
const defaultCrud = CRUD({
  title: '移动端订单', url: 'api/mobileOrder', sort: 'id,desc', crudMethod: {...crudMobileOrder},
  optShow: {
    add: false,
    edit: false,
    del: true,
    download: true,
    leadingIn: false,
    enable: false,
    disable: false,
    pass: true,
    reject: true
  },
  props: {
    //在这里配置要显示的字段
    tableColumns: [
      'code', //  编码
      'name', //  名称
      'type', //  移动端订单类型(1:APP 2:小程序)
      'busDate', //  业务日期
      'sourceType', //  来源类型(1:要货单 2:零售单 3:小程序)
      'sourceId', //  来源单据id
      'sourceCode', //  来源单据号
      'serialNumber', //  流水号
      'customerOrderCode', //  客户单号
      // 'customerId', //  客户id
      // 'customerCode', //  客户编码
      'customerName', //  客户名称
      'isContact', //  是否往来(0:客户 1:供应商 2:客户+供应商)
      // 'customerAreaId', //  客户区域id
      // 'customerAreaCode', //  客户区域编码
      'customerAreaName', //  客户区域名称
      // 'customerTypeId', //  客户分类id
      // 'customerTypeCode', //  客户分类编码
      'customerTypeName', //  客户分类名称
      // 'deptId', //  部门id
      // 'deptCode', //部门编码
      'deptName', //  部门名称
      // 'userId', //  人员id
      // 'userCode', //  人员编码
      'userName', //  人员名称
      // 'isPromotion', //  是否促销(0:否 1:是)
      // 'count', //  条数
      'boxCount', //  箱数
      'taxAmount', //  含税金额
      // 'noTaxAmount', //  未税金额
      // 'tax', //  税额
      // 'discountAmount', //  折扣金额
      'isPrint', //  是否打印(0:否 1:是)
      'printCount', //  打印次数
      'isSign', //  是否签名(0:否 1:是)
      'sign', //  签名(base64)
      'seq', //  排序
      'orderStatus', //  单据状态(SAVE:保存 PASS:审核 CLOSE:关闭)
      'remark', //  备注
      'orderRemark', //  单据说明
      // 'createUserId', //  添加人id
      // 'createUserCode', //  添加人编码
      // 'createUserName', //  添加人名称
      // 'createTime', //  添加时间
      // 'updateUserId', //  修改人id
      // 'updateUserCode', //  修改人编码
      // 'updateUserName', //  修改人名称
      // 'updateTime', //  修改时间
      // 'auditUserId', //  审核人id
      // 'auditUserCode', //  审核人编码
      // 'auditUserName', //  审核人名称
      // 'auditTime', //  审核时间
      // 'closeUserId', //  关闭人id
      // 'closeUserCode', //  关闭人编码
      // 'closeUserName', //  关闭人名称
      // 'closeTime', //  关闭时间
    ]
  }
})
const defaultForm = {
  id: null,
  code: null,
  name: null,
  type: null,
  busDate: null,
  sourceType: null,
  sourceId: null,
  sourceCode: null,
  serialNumber: null,
  customerOrderCode: null,
  customerId: null,
  customerCode: null,
  customerName: null,
  isContact: null,
  customerAreaId: null,
  customerAreaCode: null,
  customerAreaName: null,
  customerTypeId: null,
  customerTypeCode: null,
  customerTypeName: null,
  deptId: null,
  deptCode: null,
  deptName: null,
  userId: null,
  userCode: null,
  userName: null,
  isPromotion: null,
  count: null,
  boxCount: null,
  taxAmount: null,
  noTaxAmount: null,
  tax: null,
  discountAmount: null,
  isPrint: null,
  printCount: null,
  isSign: null,
  sign: null,
  seq: null,
  orderStatus: null,
  remark: null,
  orderRemark: null,
  createUserId: null,
  createUserCode: null,
  createUserName: null,
  createTime: null,
  updateUserId: null,
  updateUserCode: null,
  updateUserName: null,
  updateTime: null,
  auditUserId: null,
  auditUserCode: null,
  auditUserName: null,
  auditTime: null,
  closeUserId: null,
  closeUserCode: null,
  closeUserName: null,
  closeTime: null
}
export default {
  name: 'MobileOrder',
  components: {pagination, crudOperation, rrOperation, udOperation, jTableColumnConfig},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud(), tablemixins, publicListKey],
  dicts: ["t_mobile_order_source_type", "t_mobile_order_type", "common_yes_or_no", "common_order_status"],
  data() {
    return {

      permission: {
        add: ['admin', 'mobileOrder:add'],
        edit: ['admin', 'mobileOrder:edit'],
        del: ['admin', 'mobileOrder:del'],
        import: ['admin', 'mobileOrder:import'],
        export: ['admin', 'mobileOrder:export'],
        copy: ['admin', 'mobileOrder:copy'],
        upload: ['admin', 'mobileOrder:upload'],
        download: ['admin', 'mobileOrder:download'],
        pass: ['admin', 'mobileOrder:pass'],
        reject: ['admin', 'mobileOrder:reject'],
        closed: ['admin', 'mobileOrder:closed'],
        invalid: ['admin', 'mobileOrder:invalid'],
        stop: ['admin', 'mobileOrder:stop'],
        recover: ['admin', 'mobileOrder:recover'],
      },
      rules: {}
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  watch: {},
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },

  }
}
</script>

<style scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
</style>
